import { Component } from 'react'
import { AtGrid } from 'taro-ui'
import { View } from '@tarojs/components'
import Taro from "@tarojs/taro"

import "./index.scss"
import "taro-ui/dist/style/components/grid.scss";


export default class CustomAtGrid extends Component{

    constructor(){
        super(...arguments)
        this.state = {
            dataList: [
                {
                    image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
                    value: '领取中心'
                  },
                  {
                    image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
                    value: '找折扣'
                  },
                  {
                    image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
                    value: '领会员'
                  },
                  {
                    image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
                    value: '新品首发'
                  },
                  {
                    image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
                    value: '领京豆'
                  },
                  {
                    image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
                    value: '手机馆'
                  }
            ]
        }
    }

    /**
     * 组件将要渲染时，加载出通告栏目的信息。
     */
    async componentWillMount(){
        try{
            const res = await Taro.request({
                // url: '/api/v1/freerdbj/fwtm/aoam/acceptorderback/query/1', //仅为示例，并非真实的接口地址
                url: 'http://10.161.128.18:2779/freerdbj/fwtm/aoam/acceptorderback/query/1',
                data: {
                    // x: '',
                    // y: ''
                },
                header: {
                    'content-type': 'application/json' // 默认值
                },
                method: "GET"
            })
            let result = res.data;
            // this.setState({
            //     dataList: res.data.MSG
            // });
        }catch{
            Taro.showToast({
                title: "载入远程数据错误"
            })
        }
    }

    render(){
        const { dataList } = this.state;
        return(
            <View>
                <AtGrid 
                    mode='rect' 
                    hasBorder={false} 
                    data={dataList} 
                    // columnNum={4}
                />
            </View>
        )
    }
}